<template>
  <!-- 搜索栏开始-->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <!-- model 绑定表单数据 -->
      <el-form :inline="true" :model="queryTemplate" class="demo-form-inline">
        <el-form-item label="检测模板编码">
          <el-input v-model="queryTemplate.checkTemplateId" placeholder="检测模板编码">
          </el-input>
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input v-model="queryTemplate.checkTemplateName" placeholder="检测模板名称"/>
        </el-form-item>

        <el-form-item label="产品编码">
          <el-input v-model="queryTemplate.productId" placeholder="检测模板名称"/>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input v-model="queryTemplate.productName" placeholder="检测模板名称"/>
        </el-form-item>


        <el-form-item label="检测模板类型">
          <el-select
              style="width: 100px"
              v-model="queryTemplate.checkTemplateType"
              placeholder="选择检测模板类型"
          >
            <el-option value="0" :selected="true" label="全部"/>
            <el-option value="1" label="来料检验"/>
            <el-option value="2" label="过程检验"/>
            <el-option value="3" label="首检"/>
            <el-option value="4" label="未检"/>
            <el-option value="5" label="巡检"/>
            <el-option value="6" label="自检"/>
            <el-option value="7" label="成品检验"/>
            <el-option value="8" label="发货检验"/>
          </el-select>

        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="loadTemplate">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 搜索栏结束-->

  <!-- 工具栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="添加检测模板"
          placement="top-start"
      >
        <el-button @click="toAddTemplate" type="primary">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
        <el-icon>
          <EditPen/>
        </el-icon>
      </el-button>
      <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                     @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
        <template #reference>
          <el-button :disabled="deleteBtnDisabled" type="primary">
            <el-icon>
              <Minus/>
            </el-icon>
          </el-button>
        </template>
      </el-popconfirm>

    </el-col>
  </el-row>
  <!-- 工具栏部分结束 -->

  <!-- 列表部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-table ref="TemplateTaebl" @selection-change="handleSelectionChange" :data="templates" border :stripe="true"
                style="width: 95%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="checkTemplateId" label="检测模板编码">
          <template #default="scope">
            <el-link :underline="false" @click="toEditTemplate(scope.row.checkTemplateId)">
              {{ scope.row.checkTemplateId }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="checkTemplateName" label="检测模板名称"/>
        <el-table-column prop="checkTemplateType" label="检测模板类型">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.checkTemplateType == 1">来料检验</el-tag>
          <el-tag type="warning" v-else-if="scope.row.checkTemplateType == 2">过程检验</el-tag>
          <el-tag type="danger" v-else-if="scope.row.checkTemplateType == 3">首检</el-tag>
          <el-tag type="warning" v-else-if="scope.row.checkTemplateType == 4">未检</el-tag>
          <el-tag type="danger" v-else-if="scope.row.checkTemplateType == 5">巡检</el-tag>
          <el-tag type="warning" v-else-if="scope.row.checkTemplateType == 6">自检</el-tag>
          <el-tag type="success" v-else-if="scope.row.checkTemplateType == 7">成品检验</el-tag>
          <el-tag type="success" v-else-if="scope.row.checkTemplateType == 8">发货检验</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="checkTemplateStatus" label="状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.checkTemplateStatus == 1">正常</el-tag>
            <el-tag type="warning" v-else-if="scope.row.checkTemplateStatus == 2">废弃</el-tag>
            <el-tag type="danger" v-else>删除</el-tag>
          </template>
        </el-table-column>
        <!-- 行工具栏 -->
        <el-table-column width="140" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="toEditTemplate(scope.row.checkTemplateId)" size="small">编辑</el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteTemplate(scope.row.checkTemplateId)" title="您确定要删除这个字典信息吗？">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 列表部分结束 -->

  <!-- 分页部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                     :total="total"/>
    </el-col>
  </el-row>
  <!-- 分页部分结束 -->

  <TemplateAddWin :visible="addTemplateVisble" @optionCompleted="addOptionCompleted"/>
  <TemplateEditWin :visible="editTemplateVisble" :checkTemplateId ="editId"  @optionCompleted="editOptionCompleted"/>
</template>

<script>
import CheckTemplateRequest from "@/api/checktemplate.js";
import TemplateEditWin from "@/views/qc/checktemplate/template-edit-win.vue";
import TemplateAddWin  from "@/views/qc/checktemplate/template-add-win.vue";
export default {
  name: "qcsetting.vue",
  components:{
    TemplateEditWin,
    TemplateAddWin
  },
  data(){
    return {
      queryTemplate: {},
      limit: 10,
      page:1,
      types:{},
      total: 0,
      templates:[],
      addTemplateVisble:false,
      editTemplateVisble:false,
      editId:-1,

      editBtnDisabled:false,
      deleteBtnDisabled:false,



    }
  },methods:{
    /**
     * 工具栏删除按钮事件
     */
    deleteBtnHandler() {
      let selectionRows = this.$refs.TemplateTaebl.getSelectionRows();
      let checkTemplateIds = new Array();
      selectionRows.forEach(row => {
        checkTemplateIds.push(row.checkTemplateId);
      })
      CheckTemplateRequest.deletes(checkTemplateIds, res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.loadTemplate();
      });
    },
    /**
     * 工具栏编辑按钮事件
     */
    editBtnHandler() {
      let editTemplate = this.$refs.TemplateTaebl.getSelectionRows()[0];
      if (editTemplate != undefined) {
        this.editId = editTemplate.checkTemplateId;
        this.editTemplateVisble = true;
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要编辑的信息!'
        });
      }
    },

    pageChange(currentPage, pageSize) {
      // 将最新的页码赋值给this.currentPage
      this.page = currentPage;
      // 重新加载数据
      this.loadTemplate();
    },
    deleteTemplate(checkTemplateId){
      CheckTemplateRequest.deleteTemplate(checkTemplateId,res=>{
        if (res.code == '200'){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadTemplate();
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      });
    },

    /**
     * 行编辑事件
     */
    toEditTemplate(checkTemplateId){
      this.editTemplateVisble = true;
      this.editId = checkTemplateId;
    },

    /**
     * 监听子组件行编辑时间
     */
    editOptionCompleted(){
      this.editTemplateVisble = false;
      this.loadTemplate();
    },
    /**
     * 监听子组件
     */
    addOptionCompleted(){
      this.addTemplateVisble = false;
      this.loadTemplate();
    },
    /**
     *数据选择事件
     */
    handleSelectionChange(){
      let selectionRows = this.$refs.TemplateTaebl.getSelectionRows();
      if (selectionRows.length == 0) {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = true;
      } else if (selectionRows.length == 1) {
        this.editBtnDisabled = false;
        this.deleteBtnDisabled = false;
      } else {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = false;
      }
    },

    /**
     * 按钮事件添加
     */
    toAddTemplate(){
      this.addTemplateVisble = true;
    },

    /**
     * 加载字典信息
     */
    loadTemplate(){
      // 设置其他的条件
      this.queryTemplate.page = this.page;
      this.queryTemplate.limit = this.limit;
      CheckTemplateRequest.loadTemplate(this.queryTemplate, res => {
        this.templates = res.data.data;
        this.total = res.data.total;
      })
    },
    /**
     * 加载所有信息
     */
    loadTemplateAll(){
      CheckTemplateRequest.loadTemplateAll(res => {
        const types = res.data.map(item => {
          return {
            checkTemplateType: item.checkTemplateType,
          }
        })

      })
    },
  },mounted() {
    this.loadTemplate();
    this.loadTemplateAll();
  }
}


</script>

<style scoped>

</style>